import { QuestionCircleFilled } from "@ant-design/icons"
import { Table, TableColumnsType, Tooltip } from "antd"
import React from "react"
import { useSelector } from "react-redux"

import { SFlex } from "@/components/common"
import { useLocale } from "@/locales"
import { AppState } from "@/stores"
import { handleTotalNumber } from "@/utils/util"
import { handleNumberColor } from "@/utils/util"

interface Props {
	loading: boolean
	proxyAccountInfo: any
}

const Table4: React.FC<Props> = ({ loading, proxyAccountInfo }) => {
	const { newFormat } = useLocale()
	const { currency } = useSelector((state: AppState) => state.config)

	const columns4: TableColumnsType = [
		{
			title: newFormat("funds.columns.project"),
			dataIndex: "venueName",
			key: "venueName",
			align: "center",
			width: 50,
			render: (text, record) => record.venueName
		},
		{
			title: newFormat("funds.columns.accumulatedMemberGameWinLoss"),
			dataIndex: "netAmount",
			key: "netAmount",
			align: "center",
			render: (text, record) => handleTotalNumber(currency.symbol, "USDT", record.netAmount)
		},
		{
			title: newFormat("funds.columns.teamCommissionRatio"),
			dataIndex: "zhanchengRate",
			key: "zhanchengRate",
			align: "center",
			render: (text, record) => (record.venueName === "合计" ? "-" : `${record.zhanchengRate}%`)
		},
		{
			title: newFormat("funds.columns.teamCommissionAmount"),
			dataIndex: "commissionNetAmount",
			key: "commissionNetAmount",
			align: "center",
			render: (text, record) => handleTotalNumber(currency.symbol, "USDT", record.commissionNetAmount)
		},
		{
			title: (
				<span>
					{newFormat("funds.columns.directProxyTeamCommissionAmount")}
					<Tooltip title={newFormat("funds.fund_audit.rebate_cost_sharing_tooltip")}>
						<QuestionCircleFilled />
					</Tooltip>
				</span>
			),
			dataIndex: "underProxyNetAmount",
			key: "underProxyNetAmount",
			align: "center",
			render: (text, record) => (
				<p style={{ color: handleNumberColor(record.underProxyNetAmount) }}>
					{handleTotalNumber(currency.symbol, "USDT", record.underProxyNetAmount)}
				</p>
			)
		},
		{
			title: (
				<span>
					{newFormat("funds.columns.actualCommissionAmount")}
					<Tooltip title={newFormat("funds.fund_audit.tip_3")}>
						<QuestionCircleFilled />
					</Tooltip>
				</span>
			),
			dataIndex: "incomeNetAmount",
			key: "incomeNetAmount",
			align: "center",
			render: (text, record) => handleTotalNumber(currency.symbol, "USDT", record.incomeNetAmount)
		}
	]

	return (
		<SFlex vertical>
			<Table
				size="small"
				className="small-size-table"
				dataSource={proxyAccountInfo}
				columns={columns4}
				pagination={false}
				rowKey="userName"
				style={{ width: "100%", margin: "15px 0" }}
				loading={loading}
			/>
		</SFlex>
	)
}

export default Table4
